<template>
 <div>
<!-- 以下为前端专属测试 -->
<el-row class="myCreateOrderrow4" type="flex" justify="center" style="margin-top:30px;">
  <el-col :span="10">
    <img src="../../../../assets/phone/pxback.png" style="height: 44px;width: 40px;" @click="goback">
  </el-col>
      <el-col :span="8" class="myCreateOrdercol4"
    style="height:60px">
    <div @click="AddAddress"
    class="myaddAddressdiv">
        <img src="../../../../assets/icon/addAddressB.png" class="myaddAddressicon" v-show="!this.FormVisible">
        <img src="../../../../assets/icon/addAddressA.png" class="myaddAddressicon" v-show="this.FormVisible">
        <span class="myaddAddresstext" v-show="!this.FormVisible">添加地址</span>
        <span class="myaddAddresstext" style="color: rgb(206, 11, 109);" v-show="this.FormVisible">点击返回</span>
    </div>
    </el-col>
  </el-row>
  <PxChangeAddAdd v-if="FormVisible" :FromRouterDataaa="FromRouterData"></PxChangeAddAdd>
  <div v-show="!this.FormVisible">
    <el-row class="myCreateOrderrow4" type="flex" justify="center"
      v-for="(AddData , index) in axiosAddData" :key="index">
        <el-col :span="20" class="myCreateOrdercol4" 
        :style="{border:((myCOtransmit1==index || myCOtransmit2==index)?myCOCCvalueA:myCOCCvalueB)}">
        <div @click="ChooseAddress(index)"
        style="cursor: pointer;">
            <div class="myCreateOrderSplitLine" 
            :style="{opacity:((myCOtransmit1==index || myCOtransmit2==index)?1:0.3)}"></div>
            <div class="myCreateOrdercol4div1">
                <span>{{AddData.name}}</span>
                <span class="myCreateOrdercol4div1Text2" v-show="AddData.isDefault">默认地址</span>
                <span class="myCreateOrdercol4div1Text3" v-show="!AddData.isDefault && myCOtransmit1==index" 
                @click="SetDefaultAddress(AddData.aid)">
                    <i class="el-icon-edit">设为默认</i></span>
                <span class="myCreateOrdercol4div1Text4" v-show="myCOtransmit1==index"
                @click="DeleteAddress(AddData.aid)">
                    <i class="el-icon-delete-solid">删除</i>
                </span>
            </div>
            <div class="myCreateOrdercol4div2">
                <span>{{PhoneShow[index].slice(0,3)}}*****{{PhoneShow[index].slice(7,10)}}</span>
                <span class="myCreateOrdercol4div2Text2">周一至周日均可收货</span>
            </div>
            <div class="myCreateOrdercol4div3">
                <span class="myCreateOrdercol4div3Text1" :title="AddData.address">
                    <i class="el-icon-location" style="font-size:150%; opacity: 0.6;"></i>
                    {{AddData.provinceName+AddData.cityName}}</span>
                <span class="myCreateOrdercol4div3Text2" :title="AddData.address">
                    {{AddData.address}}</span>
            </div>
            <div class="myCreateOrderSplitLine2" 
            :style="{opacity:((myCOtransmit1==index || myCOtransmit2==index)?1:0.3)}"></div>
            <img src="../../../../assets/icon/rightdownChoose.png" class="rightdownChoose" v-show="myCOtransmit2==index">
        </div></el-col>
    </el-row>
  </div>
 </div>
</template>

<script>
import axios from 'axios'
import PxChangeAddAdd from './PxChangeAddAdd.vue'
export default {
    name:'PxChangeAdd',
    components:{PxChangeAddAdd},
        data(){
            return{
                axiosAddData:[],
                myCOCCvalueB:"1px solid rgb(179, 179, 179 ,0.2)",
                myCOCCvalueA:"1px solid rgb(179, 179, 179 ,0.8)",
                myCOtransmit1:999,
                myCOtransmit2:0,    //初始化收货地址,默认第一个选中
                rightdownChooseShow:'',
                testphone:'15655556666',
                PhoneShow:[],
                FormVisible:0,
                FromRouterData:0,
            }
        },
        mounted(){
            this.$bus.$on('FormVisible',(data)=>{
                this.FormVisible=data
            })
            this.$addr.get(`addresses`).then(
                response=>{
                    console.log('请求获取用户收货地址信息成功了',response)
                    this.axiosAddData=response.data.data
                    for( let i =0 ; i<response.data.data.length ; i++){
                        this.PhoneShow[i]=response.data.data[i].phone
                    }
                },
                error=>{
                    console.log('请求获取用户收货地址信息失败了',error.message)
                }
            )
            this.FromRouterData=this.$route.params.data
            if(this.FromRouterData == 3 ){
                setTimeout(() => {
                    this.$router.push(
                        {name:'PxCreateOrder',
                        params:{add:this.axiosAddData[1]}})
                }, 300);
            }
        },
        beforeDestroy(){
            this.$bus.$off('FormVisible')
        },
        methods:{
            goback(){
                if(this.FromRouterData == 1){
                    this.$router.push(
                        {name:'PxCreateOrder',
                        params:{add:this.axiosAddData[0]}})
                }else{
                    this.$router.push({name:'PxPersionMain'})}
            },
            ChooseAddress(index){
                if(this.FromRouterData == 1){
                    this.$router.push(
                        {name:'PxCreateOrder',
                        params:{add:this.axiosAddData[index]}})
                }else{
                    this.myCOtransmit1=index
                    this.myCOtransmit2=index
                }

            },
            DeleteAddress(val){
                this.$confirm('您确定要删除该收货地址?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$addr.get(`addresses/${val}/delete`).then(
                    response=>{
                        console.log('请求成功了,我删除了该地址',response)
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.$router.push({name:'PxChangeAddRefresh'})
                    },error=>{
                        console.log('请求失败了,我没有删除该地址',error)
                    })
                })
            },
            SetDefaultAddress(val){
                this.$addr.get(`addresses/${val}/set_default`).then(
                response=>{
                    console.log('请求成功了,我设置了默认地址',response)
                    this.$message({
                        type: 'success',
                        message: '设置成功!'
                    });
                    this.$router.push({name:'PxChangeAddRefresh'})
                },error=>{
                    console.log('请求失败了,我没有设置成功',error)
                })
            },
            AddAddress(){
                this.FormVisible=!this.FormVisible
            }
        },
}
</script>

<style scoped>
.myCreateOrderrow4{
    margin: 0 auto;
    max-width: 900px;
    margin-top: 25px;
    height: 100%;
}
.myCreateOrdercol4{
    margin-left: 10px;
    margin-right: 10px;
    height: 140px;
    border: 1px solid rgb(179, 179, 179 , 0.2);
    background-color: rgb(240, 240, 240);
}
.myCreateOrderSplitLine{
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background:repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0,#1989fa 41%,transparent 0, transparent 50%);
    background-size: 80px;
    content:'';
    opacity: 0.5;
}
.myCreateOrderSplitLine2{
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background:repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0,#1989fa 41%,transparent 0, transparent 50%);
    background-size: 80px;
    content:'';
    margin-top: 25px;
    opacity: 0.5;
}
.rightdownChoose{
    margin-top: -31px;
    float: right;
    height: 28px;
    width: 28px;
}
.myCreateOrdercol4div1{
    margin-left: 15px;
    margin-right: 15px;
    font-size: 16px;
    margin-top: 20px;
    height: 30px;
    border-bottom: 1px dashed rgb(206, 206, 206);
}
.myCreateOrdercol4div1Text2{
    opacity: 0.7;
    float: right;
    font-size: 12px;
}
.myCreateOrdercol4div1Text3{
    float: right;
    font-size: 12px;
    color: rgb(63, 119, 241);
}
.myCreateOrdercol4div1Text3 :hover{
    color: rgb(138, 179, 255);
}
.myCreateOrdercol4div1Text4{
    margin-right: 15px;
    float: right;
    font-size: 12px;
    color: rgb(241, 63, 107);
}
.myCreateOrdercol4div1Text4 :hover{
    color: rgb(255, 158, 158);
}
.myCreateOrdercol4div2{
    margin-left: 15px;
    margin-right: 15px;
    font-size: 13px;
    margin-top: 8px;
}
.myCreateOrdercol4div2Text2{
    font-size: 12px;
    float: right;
}
.myCreateOrdercol4div3{
    margin-left: 15px;
    margin-right: 15px;
    font-size: 12px;
    margin-top: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.myCreateOrdercol4div3Text1{
    font-weight: 600;
}
.myCreateOrdercol4div3Text2{
    margin-left: 8px;
}
.myaddAddressdiv{
    cursor: pointer;
    height: 100%;
    width: 100%;
    text-align: center;
    font-size: 12px;
}
.myaddAddressicon{
    position: absolute;
    margin-top: 2px;
    width: 40px;
    height: 40px;
    margin-left: -20px;
}
.myaddAddresstext{
    position: absolute;
    margin-left: -24px;
    margin-top: 42px;
}
</style>